<template>
  <div class="color-list">
    <div
      class="color-item"
      :class="colorActive === item ? 'active' : ''"
      v-for="item in color"
      :key="item"
      :style="`background-color: ${item};`"
      @click="handleSelect(item)"
    ></div>
  </div>
</template>

<script>
const colors = [
  "#E539CF",
  "#CE95FF",
  "#ED1B24",
  "#FF7747",
  "#FFBA8C",
  "#474BFF",
  "#2B95F8",
  "#51E0FF",
  "#009345",
  "#999900",
  "#8CC63E",
  "#75FFA2",
];
export default {
  props: {
    value: {
      default: "",
    },
  },
  data() {
    return {
      colors,
      color: colors,
    };
  },
  computed: {
    colorActive() {
      return this.value || colors[0];
    },
  },
  methods: {
    handleSelect(color) {
      this.$emit("input", color);
    },
  },
};
</script>

<style scoped lang="scss">
.color-list {
  display: grid;
  grid-template-columns: repeat(6, 20px);
  grid-template-rows: repeat(2, 20px);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  .color-item {
    cursor: pointer;
    border-radius: 2px;
  }
  .active {
    border: 3px solid #333;
  }
}
</style>
